import { useLocation, useNavigate } from 'react-router-dom'
import { ResultPage, Card, NavBar, List, Button } from 'antd-mobile'
import styles from './css/getorder.module.css'

function GetOrder() {
  const location = useLocation()
  const nav = useNavigate()
  const info = location.state
  console.log(info)

  const gotoPay = () => {
    // https://api-ticket.liulongbin.top/order/pay?orderNo=订单号&amount=支付的金额
    // window.open('新窗口要展示的页面的URL地址', '_blank')
    window.open(
      `https://api-ticket.liulongbin.top/order/pay?orderNo=${info.orderNo}&amount=${info.total}`,
      '_self'
    )
  }

  return (
    <div className={styles.box}>
      <div className={styles.header}>
        <NavBar onBack={() => nav(-1)}>订单详情</NavBar>
      </div>

      <ResultPage
        status=""
        title=""
        description=""
      >
        <ResultPage.Card style={{ padding: 15 }}>
          <List style={{ '--border-top': 'none', '--border-bottom': 'none' }}>
            <List.Item
              extra={<span className={styles.extra}>{info.orderNo}</span>}
            >
              <span className={styles.listLeft}>订单号</span>
            </List.Item>
            <List.Item
              extra={
                <span className={styles.extra}>
                  ￥{info.price}
                  <span> x{info.count}</span>
                </span>
              }
            >
              <span className={styles.listLeft}>成人票</span>
            </List.Item>
            <List.Item
              extra={<span className={styles.extraPrice}>￥{info.total}</span>}
            >
              <span className={styles.listLeft}>订单总计</span>
            </List.Item>
          </List>
        </ResultPage.Card>

        {/* <Card style={{ height: 128, marginTop: 12 }}>搭配 Card 使用</Card> */}

        <div className={styles.btn}>
          <Button
            color="warning"
            block
            shape="rounded"
            onClick={gotoPay}
          >
            去支付
          </Button>
        </div>
      </ResultPage>
    </div>
  )
}

export default GetOrder
